<template>
  <div class="home-router">
    <div class="lbt">
      <el-carousel indicator-position="outside" :height="imgHeight+'px'">
        <el-carousel-item v-for="item in carousel" :key="item.id">
          <img :src="item.src" ref="imgHeight" class="banner" @load="imgLoad"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="home-content">
      <div class="personal-state">
        <span>
          <img src="../assets/home-personal-1.png">
          <p>大学生</p>
          <p>对技术感兴趣，想毕业后<br>进入互联网名企工作</p>
        </span>
        <span>
          <img src="../assets/home-personal-2.png">
          <p>零基础转行</p>
          <p>非IT技术岗位，想转行跨入<br>互联网、人工智能领域</p>
        </span>
        <span>
          <img src="../assets/home-personal-3.png">
          <p>在职提升</p>
          <p>在职IT技术人群，工作遇到瓶颈，<br>想技能提升，为加薪、跳槽做准备</p>
        </span>
      </div>
      <div class="title">
        <p>路飞学城，学习编程的不二选择</p>
        <span>通过系统科学的实战项目训练，零基础6个月炼成为行业抢手技术人才</span>
      </div>
      <ul class="study">
        <li class="module1">
          <p class="title-p">1、学-视频学习</p>
          <div>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              真人出镜，专为线上录制
            </p>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              知名网红讲师亲自讲课
            </p>
          </div>
        </li>
        <li class="module2">
          <p class="title-p">2、练-练习题+作业</p>
          <div>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              海量实战练习题库
            </p>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              每章必备练习+作业
            </p>
          </div>
        </li>
        <li class="module3">
          <p class="title-p">3、改-逐行代码批改</p>
          <div>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              1V1技术导师逐行代码批改
            </p>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              标准作业答案讲解
            </p>
          </div>
        </li>
        <li class="module4">
          <p class="title-p">4、管-导师+班主任督学</p>
          <div>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              实时在线答疑，定时督学
            </p>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              VIP学习群，氛围好
            </p>
          </div>
        </li>
        <li class="module5">
          <p class="title-p">5、1v1考核+阶段测试</p>
          <div>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              严格的1v1闯关考核
            </p>
            <p>
              <img src="../assets/home-dg_1535546532.9139507.svg" />
              模拟企业真实面试场景
            </p>
          </div>
        </li>
      </ul>
      <div class="simple-learning">
        <div class="title">
          <p>学编程，其实一点都不难</p>
          <span>专业丰富的课程体系，博学多闻的实力讲师以及风趣生动的课堂，在路飞，不是灌输知识，而是点燃你的学习火焰。</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Home",
    data(){
      return{
        carousel:[
          {id:1,src:require('../assets/home-lb-1.png'),name:''},
          {id:2,src:require('../assets/home-lb-2.png'),name:''},
          {id:3,src:require('../assets/home-lb-3.png'),name:''},
          {id:4,src:require('../assets/home-lb-4.png'),name:''},
        ],
        imgHeight:'720',
      }
    },
    methods:{
      imgLoad(){
        //Vue.$nextTick(callback)，当dom发生变化更新后执行的回调。
        this.$nextTick(function () {
            this.imgHeight = this.$refs.imgHeight[0].height;
            // console.log(this.$refs)
            //$refs 获取dom节点
          }
        )
      }
    },
    mounted(){
      this.imgLoad();
      window.addEventListener('resize',()=>{
        this.imgHeight = this.$refs.imgHeight[0].height;
        this.imgLoad();
      },false)
    },
  }
</script>

<style scoped>

  .home-router .home-content{
    width: 100%;
    height: auto;
    background-color: #fff;
  }
  .lbt{
    margin-bottom: 80px;
  }
  .banner{
    width: 100%;
    height: auto;
    cursor: pointer;
  }
  .personal-state{
    width: 1100px;
    height: auto;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 100px;
  }
  .personal-state>span{
    text-align: center;
  }
  .personal-state>span>p:first-of-type{
    padding-top: 30px;
    padding-bottom: 13px;
    font-size: 22px;
    color: #5e5e5e;
  }
  .personal-state>span>p:nth-of-type(2){
    font-size: 16px;
    color: #9b9b9b;
  }
  .personal-state>span>img{
    width: 330px;
    height: 210px;
  }
  .title{
    text-align: center;
  }
  .title>p{
    font-size: 28px;
    color: #4a4a4a;
    padding-bottom: 13px;
  }
  .title>span{
    font-size: 16px;
    color: #9b9b9b;
  }
  .study{
    width: 1200px;
    height: 1000px;
    margin: 0 auto;
    margin-top: 70px;
    background: url(//hcdn1.luffycity.com/static/frontend/index/home-bg1_1535550278.897424.svg) no-repeat 50%;
    background-size: 624px 656px;
    position: relative;
  }
  .study>li{
    list-style: none;
    height: auto;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 6px 35px #adcbfb;
    border-radius: 8px;
    padding: 20px 25px;
    transition: all .3s linear;
  }
  .module1{
    position: absolute;
    left: 595px;
    top: 66px;
  }
  .module2{
    position: absolute;
    left: 200px;
    top: 168px;
  }
  .module3{
    position: absolute;
    left: 150px;
    bottom: 340px;
  }
  .module4{
    position: absolute;
    right: 250px;
    bottom: 235px;
  }

  .module5{
    position: absolute;
    right: 72px;
    top: 285px;
  }
  .title-p{
    font-size: 22px;
    color: #4a4a4a;
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 24px;
    letter-spacing: .93px;
    border-bottom: 1px solid #adcbfb;
  }
  .study>li>div>p{
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #5e5e5e;
    letter-spacing: .6px;
  }
  .study>li>div>p:first-of-type{
    margin-bottom: 15px;
  }
  .study>li>div>p>img{
    width: 24px;
    height: 24px;
    margin-right: 15px;
  }
  .simple-learning{
    width: 1100px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 110px;
  }

</style>
